<template>
  <div>
    <template v-for="item in data">
      <div class="new" :key="item.id">
        <div class="overall">
          <div class="author">
            <img :src="item.clientImage" />
            <span>{{ item.clientName }}</span>
          </div>
          <div class="neirong">
            <h4>为啥要加柠檬汁.没有的话！用啥代替</h4>
            <span>加柠檬汁第一个是去蛋腥味，第二个是增加蛋白的稳定。没有的话可以用白醋代替。</span>
          </div>
          <div class="zan">
            <span>215个赞</span>
          </div>
        </div>
      </div>
    </template>
       <!-- <div style="height: 0.8rem;"></div> -->
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      data: []
    }
  },
  mounted() {
    let url = 'https://api.hongbeibang.com/question/getEssence?_t=1607309179361&pageIndex=0&pageSize=10&all=true&timestamp=1607309179361'
    axios.get(url).then(res => {
      let data = res.data.data.content.data
      this.data = data
      console.log(data)
    })
  }
}
</script>

<style lang="scss" scoped>
.overall {
  width: 100%;
  height: 150px;
  border-bottom: 1px solid #e7e2e5;
  position: relative;
  top: 100px;
  margin-top: 5px;
  .author {
    width: 100%;
    height: 45px;
    img {
      width: 38px;
      height: 38px;
      border-radius: 34px;
    }
    span {
      font-size: 13px;
      height: 40px;
      line-height: 38px;
      text-align: left;
      color: #4a4945;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-left: 10px;
    }
  }
  .neirong {
    width: 100%;
    h4 {
      font-size: 18px;
      font-weight: bold;
      color: #4a4945;
      line-height: 25px;
      max-height: 50px;
      text-overflow: ellipsis;
      overflow: hidden;
      display: box;
      display: -moz-box;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -moz-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    span {
      font-size: 14px;
      color: #4a4945;
      line-height: 20px;
      margin: 5px 0 0 0;
      max-height: 60px;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
  .zan {
    width: 100%;
    span {
      overflow: hidden;
      font-size: 14px;
      line-height: 20px;
      color: #999999;
      box-sizing: border-box;
    }
  }
}
</style>
>
